<%@ Page Language="C#" AutoEventWireup="false" MasterPageFile="ScreenMasterPage.master" %>
<asp:Content ContentPlaceHolderID="Head" runat="server">

<script type="text/javascript">
	window.top.importThemedOshControl(this, "Clock.htc");

	var maxNumberOfChannels = 8;
	var timeLinePeriod = new Date(90 * 60 * 1000);
	var timeLineStep = new Date(30 * 60 * 1000);
	var minNoDataPeriod = new Date(2 * 60 * 1000);

	var leftContinueWidth = 21;
	var rightContinueWidth = 21;
	var channelInfoWidth = 150;
	var maxEventWidth = 490;
	var pixelsPerMillisecond = maxEventWidth / timeLinePeriod.valueOf();
	var epg = null;
	var isEpgReloadRequired = true;
	var updateTimer = new Timer("EPG.updateTimer", 0);
	updateTimer.setAutoReset(false);
	updateTimer.onTimeout.attach(null, onUpdateTimeout);

	function window::onload()
	{
		epg = new Epg(maxNumberOfChannels, timeLinePeriod, timeLineStep, minNoDataPeriod);
		epg.onPageChange.attach(this, onPageChange);
		epg.onEventChange.attach(this, onEventChange);

		screen.onKeyPreview.attach(this, onKeyPreview);
		screen.onKey.attach(this, onKey);
		screen.onShow.attach(this, onShow);
		screen.onCommand.attach(this, onCommand);
		osh.mediaController.onMediaTreeChange.attach(this, onMediaTreeChange);
	}
	
	function window::unload()
	{
		osh.mediaController.onMediaTreeChange.detach(this, onMediaTreeChange);
		screen.onKey.detach(this, onKey);
		screen.onKeyPreview.detach(this, onKeyPreview);
		screen.onShow.detach(this, onShow);
		screen.onCommand.detach(this, onCommand);
	}

	function onShow()
	{
		if(isEpgReloadRequired)
		{
			isEpgReloadRequired = false;
			reloadEpg();
		}
		else
			epg.now();
			
		updateTimer.setInterval(getUpdateTimerDelay());
		updateTimer.setEnabled(true);
	}

	function onMediaTreeChange()
	{
		if(!osh.getVisible())
		{
			isEpgReloadRequired = true;
			return;
		}
		reloadEpg();
	}

	function reloadEpg()
	{
		epg.updateMediaTree();
		clearEpg();
		epg.now();
		updateEpg();
		osh.refresh();
	}

	function onUpdateTimeout()
	{
		if(!screen.getVisible()) return;
		
		var currentEvent = epg.getCurrentEvent();
		updateEpg();
		updateCurrentEvent(currentEvent);
		
		updateTimer.setInterval(getUpdateTimerDelay());
		updateTimer.setEnabled(true);
	}
	function onPageChange()
	{
		updateEpg();
	}
	function onEventChange(sender, event)
	{
		updateCurrentEvent(event.currentEvent);
	}
	
	function onEventClick(eventId)
	{
		epg.setCurrentEvent(eventId);
		osh.refresh();
	}

	var rcNumKeyMap = [null, Keys.VK_HOME, Keys.VK_UP, Keys.VK_PAGEUP, Keys.VK_LEFT, null, Keys.VK_RIGHT, Keys.VK_END, Keys.VK_DOWN, Keys.VK_PAGEDOWN];
	function onKeyPreview(sender, event)
	{
		if(event.keyCode >= Keys.VK_0 && event.keyCode <= Keys.VK_9)
		{
			var key = rcNumKeyMap[event.keyCode - Keys.VK_0];
			if(key)
				event.keyCode = key;
		}
	}

	function onKey(sender, event)
	{
		if(event.keyCode == Keys.VK_LEFT)
			epg.moveBack();
		else if(event.keyCode == Keys.VK_RIGHT)
			epg.moveForward();
		else if(event.keyCode == Keys.VK_UP)
			epg.moveToPreviousChannel();
		else if(event.keyCode == Keys.VK_DOWN)
			epg.moveToNextChannel();
		else if(event.keyCode == Keys.VK_PAGEUP)
			epg.pageUp();
		else if(event.keyCode == Keys.VK_PAGEDOWN)
			epg.pageDown();
		else if(event.keyCode == Keys.VK_HOME)
			epg.moveToFirstChannel();
		else if(event.keyCode == Keys.VK_END)
			epg.moveToLastChannel();
		else if(event.keyCode == Keys.VK_RETURN)
			epg.playCurrentMedia();
		else if(event.keyCode == Keys.VK_0 || event.keyCode == Keys.VK_5)
			event.processed = false;
	}

	function onCommand(sender, event)
	{
		var command = event.command.toLowerCase();
		if(command == "now")
			epg.now();
		else if(command == "back")
			epg.moveBack();
		else if(command == "forward")
			epg.moveForward();
		else if(command == "previouschannel")
			epg.moveToPreviousChannel();
		else if(command == "nextchannel")
			epg.moveToNextChannel();
		else if(command == "pageup")
			epg.pageUp();
		else if(command == "pagedown")
			epg.pageDown();
		else if(command == "first")
			epg.moveToFirstChannel();
		else if(command == "last")
			epg.moveToLastChannel();
		else if(command == "nexttree")
			nextTree();
		else if(command == "previoustree")
			previousTree();
		else if(command == "play")
			epg.playCurrentMedia();
	}
	
	function nextTree()
	{
		if(epg.moveToNextTree())
		{
			clearEpg();
			epg.now();
			updateEpg();
		}
	}
	
	function previousTree()
	{
		if(epg.moveToPreviousTree())
		{
			clearEpg();
			epg.now();
			updateEpg();
		}
	}

	// Calcs number of milliseconds left to the next minute
	// plus 2 sec for proper EPG update
	function getUpdateTimerDelay()
	{
		var now = Date.now();
		return (60 * 1000) - (now.valueOf() % (60 * 1000)) + (2 * 1000);
	}

	function clearEpg()
	{
		updateCurrentEvent(null);
		for(var i = 0; i < maxNumberOfChannels; i++)
			document.getElementById("epgPh" + (i + 1)).innerHTML = "";
	}

	function updateEpg()
	{
        if(epg.isEmpty()) return;
	
		epgTimePh.innerHTML = buildEpgTimeLine(epg.getStartTime(), epg.getEndTime());
		var channels = epg.getVisibleChannels();
		for(var i = 0; i < channels.length; i++)
		{
			var channelInfo = channels[i];
			document.getElementById("epgPh" + (i + 1)).innerHTML =
				buildChannelEpg(channelInfo, epg.getStartTime(), epg.getEndTime());
		}
	}
	
	function buildEpgTimeLine(startTime, endTime)
	{
		var html = "";
		html += "<div class='epgDate'>{0}</div>"
			.replace("{0}", startTime.format("ddd, dd MMMM"));
		for(var time = startTime; time < endTime; time = time.add(timeLineStep))
		{
			html += "<div class='epgTime' style='position: absolute; left: {0}px;'>{1}</div>"
				.replace("{0}", channelInfoWidth + Math.round(time.subtract(startTime) * pixelsPerMillisecond))
				.replace("{1}", time.format("HH:mm"));
		}
		return html;
	}

	function buildChannelEpg(channelInfo, startTime, endTime)
	{
		var channelEpgEventsHtml = buildChannelEpgEvents(channelInfo.events);
		var channelEpgHtml = 
			"<div class='channelDiv'>" + 
			"<img class='channelBg' src='/themes/mce/images/epg.channel.png' />" + 
			"<div class='channelNumber'>" + (channelInfo.number || "") + "</div>" +
			"<div class='channelName'>" + channelInfo.name + "</div>" +
			"</div>" +
			channelEpgEventsHtml;

		return channelEpgHtml;
	}

	function buildChannelEpgEvents(eventCuts)
	{
		var html = "";
		for(var i = 0; i < eventCuts.length; i++)
		{
			var eventCut = eventCuts[i];
			var eventId = eventCut.id;
			eventCut.left = calcEventLeft(eventCut.cutStartTime);
			eventCut.width = calcEventWidth(eventCut.cutStartTime, eventCut.cutEndTime);

			html += ("<div id='{0}' class='epgEvent' onclick='onEventClick(\"{0}\")' " + 
				"style='left: {1}px; width: {2}px;'>")
				.replace(/\{0\}/g, eventId)
				.replace("{1}", eventCut.left)
				.replace("{2}", eventCut.width);

			var now = Date.now();
			
			var bgImageSrc, leftImageSrc, rightImageSrc, textClass;
			if(eventCut.noData)
			{
				bgImageSrc = "/themes/mce/images/epg.active.bg.png";
				leftImageSrc = "/themes/mce/images/epg.active.left.png";
				rightImageSrc = "/themes/mce/images/epg.active.right.png";
				textClass = "epgEventNameActive";
			}
			else if(eventCut.startTime <= now && eventCut.endTime > now)
			{
				bgImageSrc = "/themes/mce/images/epg.active.bg.png";
				leftImageSrc = "/themes/mce/images/epg.active.left.png";
				rightImageSrc = "/themes/mce/images/epg.active.right.png";
				textClass = "epgEventNameActive";
			}
			else
			{
				bgImageSrc = "/themes/mce/images/epg.inactive.bg.png";
				leftImageSrc = "/themes/mce/images/epg.inactive.left.png";
				rightImageSrc = "/themes/mce/images/epg.inactive.right.png";
				textClass = "epgEventName";
			}

			var leftImage = eventCut.noStart && eventCut.width >= leftContinueWidth;
			var rightImage = eventCut.noEnd && eventCut.width >= rightContinueWidth;

			if(leftImage)
				html += "<img class='epgEventLeft' src='{0}' />"
					.replace("{0}", leftImageSrc);

			var bgLeft = eventCut.left + (leftImage ? leftContinueWidth : 0);
			var bgWidth = eventCut.width -
				(leftImage ? leftContinueWidth : 0) - (rightImage ? rightContinueWidth : 0);

			html += "<img class='epgEventBg' src='{0}' style='left: {1}px; width: {2}px;' />"
				.replace("{0}", bgImageSrc)
				.replace("{1}", bgLeft)
				.replace("{2}", bgWidth);

			if(rightImage)
				html += "<img class='epgEventRight' src='{0}' />"
					.replace("{0}", rightImageSrc);

			html += "</div>";

			var textLeft = eventCut.left + (eventCut.noStart ? 15 : 5);
			var textWidth = eventCut.width - (eventCut.noStart ? 15 : 5) - (eventCut.noEnd ? 15 : 5);

			html += ("<div onclick='onEventClick(\"{0}\")' onselectstart='return false;'" + 
				"class='{1}' style='left: {2}px; clip: rect(auto {3} auto auto);'>{4}</div>")
				.replace("{0}", eventId)
				.replace("{1}", textClass)
				.replace("{2}", textLeft)
				.replace("{3}", textWidth)
				.replace("{4}", eventCut.name);
		}
		return html;
	}

	function calcEventLeft(startTime)
	{
		return channelInfoWidth + Math.round(startTime.subtract(epg.getStartTime()) * pixelsPerMillisecond) + 1;
	}
	
	function calcEventWidth(startTime, endTime)
	{
		return Math.round(endTime.subtract(startTime) * pixelsPerMillisecond) - 2;
	}

	function updateCurrentEvent(currentEvent)
	{
		if(currentEvent)
		{
			var phTop = document.getElementById(currentEvent.id).parentElement.offsetTop;
			var bgLeft = currentEvent.noStart ? leftContinueWidth : epgCursorLeft.runtimeStyle.width;
			var bgWidth = currentEvent.width;
			if(currentEvent.noStart && bgWidth >= leftContinueWidth)
				bgWidth -= leftContinueWidth;
			if(currentEvent.noEnd && bgWidth >= rightContinueWidth)
				bgWidth -= rightContinueWidth;

			var leftTextMargin = currentEvent.noStart ? 15 : 5;
			var rightTextMargin = currentEvent.noEnd ? 15 : 5;
			var textLeft = leftTextMargin;
			var textWidth = currentEvent.width - leftTextMargin - rightTextMargin;
			if(textWidth < 0) textWidth = 0;

			epgCursor.runtimeStyle.top = phTop;
			epgCursor.runtimeStyle.left = currentEvent.left;
			epgCursor.runtimeStyle.width = currentEvent.width;

			epgCursorBg.runtimeStyle.left = bgLeft;
			epgCursorBg.runtimeStyle.width = bgWidth;

			epgCursorLeft.runtimeStyle.display = currentEvent.noStart ? "block" : "none";
			epgCursorRight.runtimeStyle.display = currentEvent.noEnd ? "block" : "none";

			epgCursorText.runtimeStyle.left = textLeft;
			epgCursorText.runtimeStyle.clip = "rect(auto " + textWidth + " auto auto)";
			epgCursorText.innerText = currentEvent.name;

			epgCursor.runtimeStyle.visibility = "visible";
		}
		else
		{
			epgCursor.runtimeStyle.visibility = "hidden";
		}

		updateCurrentEventInfo(currentEvent);
	}

	function updateCurrentEventInfo(epgEvent)
	{
		if(!epgEvent || epgEvent.noData)
		{
			selectedEventName.innerHTML = "";
			selectedEventDescription.innerHTML = "";
			selectedEventTime.innerHTML = "";
		}
		else
		{
			selectedEventName.innerHTML = epgEvent.name || "";
			selectedEventDescription.innerHTML = epgEvent.description || "";
			selectedEventTime.innerHTML = epgEvent.startTime.format("HH:mm") +
				" - " + epgEvent.endTime.format("HH:mm");
		}

		var	folderInfo;
		var channel = epg.getCurrentChannel();
		if(channel && channel.folderName)
			folderInfo = channel.folderName + " / " + channel.treeName + " / " + channel.libraryName;
		else
			folderInfo = "&nbsp;";

		epgMediaFolder.innerHTML = folderInfo;
	}
	
	function showHideNav()
	{
		if(navDiv.runtimeStyle.visibility == "visible")
			navDiv.runtimeStyle.visibility = "hidden";
		else
			navDiv.runtimeStyle.visibility = "visible";
	}
	
	function playCurrentMedia()
	{
		epg.playCurrentMedia();
	}
	
</script>

<style type="text/css">

	#fullEpgDiv
	{
		position: absolute; left: 10px; top: 30px; width: 640px; /*border: solid 1px white;*/ overflow: hidden;
		font-family: Trebuchet MS; font-size: 22px; font-weight: bold;
	}
	
	#epgMediaFolder { position: relative; color: #A0C0E0; font-size: 22px; text-align: right; /*padding-left: 150px;*/ }
	#epgTimePh { position: relative; width: 650px; font-size: 18px; font-weight: bold; }
	.epgDate { left: 0px; width: 150px; height: 1.2em; color: #B0D0FF; padding-left: 5px; overflow: hidden; }
	.epgTime { position: absolute; top: 0px; color: white; }
	.epgPh { position: relative;  margin-bottom: 2px; width: 650px; height: 35px; /*border: solid 1px red;*/ }
	
	.channelDiv { position: relative; left: 0px; width: 150px; height: 35px; }
	.channelBg { position: absolute; left: 0px; width: 150px; height: 35px; }
	.channelNumber { position: absolute; left: 0px; width: 38px; height: 35px; color: #B0D0FF; overflow: hidden; line-height: 35px; font-size: 80%; text-align: right; }
	.channelName { position: absolute; left: 40px; width: 300px; height: 35px; color: white; clip: rect(auto 105px auto auto); line-height: 35px; font-size: 80%; }

	.epgEvent { position: absolute; top: 0px; height: 35px; }
	.epgEventName { position: absolute; top: 0px; width: 600px; height: 35px; line-height: 35px; color: #102C5D; overflow: hidden; }
	.epgEventNameActive { position: absolute; top: 0px; width: 600px; height: 35px; line-height: 35px; color: #E0F0FF; overflow: hidden; }
	IMG.epgEventBg { height: 35px; }
	IMG.epgEventLeft { width: 21px; height: 35px; }
	IMG.epgEventRight { width: 21px; height: 35px; }
	IMG#epgCursorLeft { position: absolute; left: 0px; top: 0px; width: 21px; height: 35px; display: none; }
	IMG#epgCursorBg { position: absolute; left: 0px; width: 0px; height: 35px; }
	IMG#epgCursorRight { position: absolute; right: 0px; top: 0px; width: 21px; height: 35px; display: none; }
	
	#selectedEvent { position: relative; height: 195px; width: 100%; margin-top: 5px; }
	#selectedEventTime { position: absolute; left: 0px; top: 0px; width: 150px; height: 30px; line-height: 30px; font-size: 20px; font-weight: bold; color: #B0D0FF; padding-left: 5px; }
	#selectedEventName { position: absolute; left: 150px; top: 0px; height: 30px; line-height: 30px; font-size: 22px; font-weight: bold; overflow: hidden; padding-left: 5px; }
	#selectedEventDescription { position: absolute; top: 30px; height: 100px; line-height: 25px; font-size: 20px; overflow: hidden; padding-left: 5px; padding-right: 5px; }
	
</style>

</asp:Content>
<asp:Content ContentPlaceHolderID="Body" runat="server">

	<h1>guide</h1>

	<osh:Clock mode="brief" class="EPG" />

	<div id="fullEpgDiv">
		<div id="epgMediaFolder"></div>
		<div id="epgTimePh"></div>
		<div id="epgPh1" class="epgPh"></div>
		<div id="epgPh2" class="epgPh"></div>
		<div id="epgPh3" class="epgPh"></div>
		<div id="epgPh4" class="epgPh"></div>
		<div id="epgPh5" class="epgPh"></div>
		<div id="epgPh6" class="epgPh"></div>
		<div id="epgPh7" class="epgPh"></div>
		<div id="epgPh8" class="epgPh"></div>

		<div id="selectedEvent">
			<div id="selectedEventTime"></div>
			<div id="selectedEventName"></div>
			<div id="selectedEventDescription"></div>
		</div>

		<div id="epgCursor" style="position: absolute; visibility: hidden; z-index: 1;" ondblclick="playCurrentMedia()">
			<img id="epgCursorLeft" src="/themes/mce/images/epg.focus.left.png" />
			<img id="epgCursorBg" src="/themes/mce/images/epg.focus.bg.png" />
			<img id="epgCursorRight" src="/themes/mce/images/epg.focus.right.png" />
			<div id="epgCursorText" class="epgEventNameActive" onselectstart="return false;"></div>
		</div>
	</div>

	<img alt="" title="Double click to show/hide navigation panel." src="/Themes/Common/Images/blank.gif"
		style="position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100px;" ondblclick="showHideNav()" />

	<div id="navDiv" style="position: absolute; z-index: 1; bottom: 0px; right: 0px; visibility: hidden;">
		<input type="button" value="NextTree" onclick="nextTree();osh.refresh()" style="width: 60px;"
		 /><input type="button" value="First" onclick="epg.moveToFirstChannel();osh.refresh()" style="width: 50px;"
		 /><input type="button" value="Up" onclick="epg.moveToPreviousChannel();osh.refresh()" style="width: 50px;"
		 /><input type="button" value="PgUp" onclick="epg.pageUp();osh.refresh()" style="width: 50px;" /><br />

		<input type="button" value="PrevTree" onclick="previousTree();osh.refresh()" style="width: 60px;"
		 /><input type="button" value="Left" onclick="epg.moveBack();osh.refresh()" style="width: 50px;"
		 /><input type="button" value="Now" onclick="epg.now();osh.refresh();" style="width: 50px;"
		 /><input type="button" value="Right" onclick="epg.moveForward();osh.refresh()" style="width: 50px;" /><br />
		 
		<input type="button" value="Last" onclick="epg.moveToLastChannel();osh.refresh()" style="margin-left: 60px; width: 50px;"
		 /><input type="button" value="Down" onclick="epg.moveToNextChannel();osh.refresh()" style="width: 50px;"
		 /><input type="button" value="PgDn" onclick="epg.pageDown();osh.refresh()" style="width: 50px;" /><br />
	</div>

	<div id="msg"></div>

</asp:Content>
